<!--
 * @Author: wangjh wangjiahui0710@163.com
 * @Date: 2024-06-11 11:33:54
 * @LastEditors: wangjh wangjiahui0710@163.com
 * @LastEditTime: 2024-09-19 11:10:08
 * @FilePath: \cip-admin\src\pages\park\third-party\audit\components\filter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { WORK_TYPE_OPTIONS,COURSE_TYPE_OPTIONS, EXAME_TYPE_OPTIONS } from "@/config/enum-options";

import { injectState } from "../state";

defineOptions({ name: "Filters" });

const {
	filter,
	page: { isLoading },
	detailDialogRef,
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
	filter.value = { ...toRaw(data.value) };
};

const reset = () => {
	data.value = { ...initial };
};
</script>

<template>
	<el-form class="filter-form" inline :model="data" :disabled="isLoading">
		<div>
			<el-form-item label="考试状态" prop="考试状态">
				<el-select-v2
					v-model="data.examStatus"
					clearable
					class="w-200px!"
					:options="EXAME_TYPE_OPTIONS"
					placeholder="请选择"
				/>
			</el-form-item>
			<el-form-item label="人员类型" prop="人员类型">
				<el-select-v2
					v-model="data.category"
					clearable
					class="w-200px!"
					:options="WORK_TYPE_OPTIONS"
					placeholder="请选择"
				/>
			</el-form-item>
			<el-form-item label="搜索内容" prop="搜索内容">
				<el-input
					v-model="data.name"
					clearable
					class="w-200px!"
					placeholder="请选择"
				/>
			</el-form-item>
			<el-form-item>
				<el-divider direction="vertical" h="32px!" m="r-22px!" />
				<el-button
					type="primary"
					:loading="isLoading"
					@click="search"
					size="small"
				>
					<template #icon>
						<el-icon class="i-custom:search" />
					</template>
					查询
				</el-button>
				<el-button @click="reset" size="small">
					<template #icon>
						<el-icon class="i-custom:reset" />
					</template>
					重置
				</el-button>
			</el-form-item>
		</div>
	</el-form>
</template>

<style lang="scss" scoped>
.createRecord {
	margin-right: 22px;
	margin-bottom: 22px;
}
.filter-form {
	display: flex;
	justify-content: space-between;
}
</style>
